<template>
  <div>
    <div style="width:100%">
      <Header />
    </div>
    <div class="cantainer">

      <div class="breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{mianbao}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{title}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="detalT ellipsis">
        {{title}}
      </div>
      <div class="main">
        <div class="left">
          <el-card class="box-card">
            <img :src="imgUrl" alt="" style="width: 90%; height: 1130px; padding:35px 18px 20px 18px">
            <!-- <el-image style="width: 90%; height: 1130px; padding:35px 18px 20px 18px" :src="imgUrl"></el-image> -->
            <p>众图网提供视觉美观的手绘520表白节企业线上借势插画海报素材下载，本次作品主题是平面广告 ，使用场景是海报，编号是1676681，软件格式是 PSD ，建议使用 Adobe Photoshop 打开，该平面广告素材大小是116.19 MB， 尺寸是3000x1500像素， 众图网提供原创设计模板下载，内容包括： 海报模板、海报 素材等，下载源文件后可编辑修改文字图片，下载设计素材就来【众图网】</p>
            <p>手绘520表白节企业线上借势插画海报是由众图网供稿设计师上传</p>
            <p>浏览本次作品时的相关推荐： 520海报 520表白 520表白节 520 表白节 表白520 手绘插画 520爱表白 520表白墙 圣诞节插画 520表白日 圣诞节海报 表白 企业海报 线上 感恩节海报 新年插画海报 元旦海报手绘 插画手绘 表白海报 插画海报 浮世绘手绘插画 520情人节 插画 手绘海报</p>
          </el-card>
        </div>
        <div class="right">
          <div class="rightTop">
            <el-button type="danger" round>危险按钮</el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
          </div>
          <div class="rightFloor">
            <div>
              <li>
                <span>图片编号</span>
                <span>1676681</span>
              </li>
              <li>
                <span>颜色模式</span>
                <span>CMYK</span>
              </li>
              <li>
                <span>像素尺寸</span>
                <span>3000×1500</span>
              </li>
              <li>
                <span>文件大小</span>
                <span>116.71MB</span>
              </li>
              <li>
                <span>文件格式</span>
                <span>PSD</span>
              </li>
              <li>
                <span>推荐软件</span>
                <span>Adobe Photoshop CS6</span>
              </li>
              <li>
                <span>上架时间</span>
                <span>2021-04-21</span>
              </li>
            </div>
            <div style="border-top:1px solid #ccc;width:320px">
              <li>
                <span>图片|字体版权</span>
                <span>仅供参考</span>
              </li>
              <li>
                <span>上传者</span>
                <span>搬砖小蚂蚁</span>
              </li>
              <li>
                <span>店铺ID</span>
                <span>317002</span>
              </li>
            </div>
            <div class="shall" style="font-size:18px">
              <el-row style="width:320px">
                <el-col :span="4">
                  <span>分享</span>
                </el-col>
                <el-col :span="20">
                  <div class="icon-font">
                    <i class="el-icon-edit" style="font-size:25px"></i>
                    <i class="el-icon-star-off" style="font-size:25px"></i>
                    <i class="el-icon-goods" style="font-size:25px"></i>
                    <i class="el-icon-message-solid" style="font-size:25px"></i>
                    <i class="el-icon-s-flag" style="font-size:25px"></i>
                  </div>
                </el-col>
              </el-row>

            </div>
            <div class="aboutSerach">
              <p>相关搜索:</p>
              <el-button round size="medium">520海报</el-button>
              <el-button round size="medium">520表白</el-button>
              <el-button round size="medium">520表白节</el-button>
              <el-button size="medium" round>手绘插图</el-button>
              <el-button size="medium" round>520</el-button>
              <el-button size="medium" round>表白520</el-button>
              <el-button size="medium" round>520爱表白</el-button>
              <el-button size="medium" round>表白节</el-button>
              <el-button size="medium" round>520表白墙</el-button>
              <el-button size="medium" round>520表白日</el-button>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import Header from "@/component/head.vue"
export default {
  name: 'About',
  data() {
    return {
      imgUrl: '',
      title: "",
      mianbao: "",
    }
  },
  components: {
    Header,
  },
  mounted: function () {
    console.log("123", this.$route.params.url);
    this.imgUrl = this.$route.params.url;
    this.title = this.$route.params.title;
    // window.pageYOffset=0;
    // document.documentElement.scrollTop;
    // document.body.scrollTop=0;
    scrollTo(0, 0);
    if (this.$route.params.id <= 8) {
      this.mianbao = "平台精选"
    } else if (this.$route.params.id <= 16) {
      this.mianbao = "文化·展馆"
    } else {
      this.mianbao = "商业精选"
    }
  }

}
</script>

<style scoped>
.cantainer {
  width: 1310px;
  margin: 0 auto;
  /* background-color: red; */
}
.breadcrumb {
  width: 100%;
  height: 50px;
  padding: 18px 0 0 7px;
  /* line-height: 50px; */
}
.detalT {
  line-height: 58px;
  font-size: 26px;
  color: #333;
  display: flex;
  justify-content: flex-start;
  padding-left: 60px;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.editValue ellipsis_title {
}
.main {
  width: 1310px;
  display: flex;
  justify-content: left;
  justify-items: left;
}
.left {
  width: 820px;
  padding: 0 60px;
}
.right {
  width: 320px;
}
.box-card {
  width: 100%;
  /* height: 980px; */
}
.box-card p {
  display: block;
  color: #ccc;
  text-align: left;
  font-size: 12px;
  /* margin-block-start: 1em;
    margin-block-end: 1em; */
  /* margin-inline-start: 0px;
    margin-inline-end: 0px; */
  /* line-height: 1.6; */
  margin: 0 0 10px;
}
.rightTop {
  width: 320px;
  margin: 0px 0px 30px;
  padding-bottom: 20px;
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
li {
  width: 320px;
  height: 30px;
  margin: 30px 0 16px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666666;
}
.shall {
  width: 320px;
  /* display: flex; */
  /* justify-content: ; */
  border-top: 1px solid #ccc;
  padding-top: 20px;
  color: #999999;
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid #ccc;
}
.icon-font {
  display: flex;
  justify-content: space-around;
}
.aboutSerach p {
  margin: 0 0 10px;
  font-size: 18px;
  color: #999999;
  /* align: "left"; */
  text-align: left;
}
.aboutSerach button {
  padding: 5px;
  margin: 15px 20px 0 0;
}
</style>